<template>
  <div>
    <!-- 搜索模块 -->
    <section id="SearchArea">
      <div class="w" id="wrap-box">
        <p id="motto"> 当你凝视深渊时，<br />深渊也在凝视你。 </p>
        <div id="search-box">
          <input type="text" placeholder="搜索" id="search" />
          <button id="search-bt"></button>
        </div>
      </div>
    </section>
    <!-- 书单模块 -->
    <section class="w" id="BookListArea">
      <div id="BookList">
        <h5>
          书单<br /><br />BOOK LIST<br /><br />
          <a href="BookList/bookList.html"> More...</a>
        </h5>
      </div>
      <div id="BookList-cards">
        <a href="#" class="link">
          <div class="BookList-card">
            <img src="../assets/images/b1.jpg" alt="书的封面" />
            <div id="ReadingStatusBox">
              <span class="ReadingStatus"> 想读</span>
              <span class="ReadingStatus"> 在读</span>
              <span class="ReadingStatus"> 读过</span>
            </div>
            <div class="B-introduce">
              <p class="BookName">{{ msg }}</p>
              <p class="detail">
                《撒哈拉的故事》是一部由三毛创作的散文集，于1976年首次出版。本书是一系列以沙漠为背景的故事，由几篇精彩动人的散文结合而成，以自然、清新、朴素的语言主要描写了三毛和荷西在撒哈拉沙漠生活时的所见所闻，与当地相识朋友的故事。
              </p>
            </div>
          </div>
        </a>
        <a href="#" class="link">
          <div class="BookList-card">
            <img src="../assets/images/b2.jpg" alt="书的封面" />
            <div id="ReadingStatusBox">
              <span class="ReadingStatus"> 想读</span>
              <span class="ReadingStatus"> 在读</span>
              <span class="ReadingStatus"> 读过</span>
            </div>
            <div class="B-introduce">
              <p class="BookName">雨季不再来</p>
              <p class="detail">
                《雨季不再来》是2007年北京十月文艺出版社出版的图书，作者是三毛。该书以三毛的生命历程为主题，记录了三毛17岁到22岁的成长过程，真实呈现出三毛少女时代的成长感受，辍学、自闭、叛逆，游学西班牙、德国、美国后，渐渐成长为独立自信的青年
              </p>
            </div>
          </div>
        </a>
        <a href="#" class="link">
          <div class="BookList-card">
            <img src="../assets/images/b3.jpg" alt="书的封面" />
            <div id="ReadingStatusBox">
              <span class="ReadingStatus"> 想读</span>
              <span class="ReadingStatus"> 在读</span>
              <span class="ReadingStatus"> 读过</span>
            </div>
            <div class="B-introduce">
              <p class="BookName">THIS IS GOING TO HURT</p>
              <p class="detail">
                《This is Going to
                Hurt》是2018年4月19日Picador出版的图书，作者是Adam
                Kay。从2004年到2010年，他从一名实习医生一步步做到副主任医生。却在2011年经历了人生的重大抉择——辞职，并转行做独立情景喜剧演员。2017年，他将曾经奋斗过6年的妇产科医生经历公开于世。于是有了这本《绝对笑喷之弃业医生日志》。
              </p>
            </div>
          </div>
        </a>
        <a href="#" id="change">
          <span> 换一批</span>
        </a>
      </div>
    </section>
    <!-- 影单模块 -->
    <section class="w" id="FilmArea">
      <div id="FilmList">
        <h5>
          影单<br /><br />FILM LIST<br /><br />
          <a href="#"> More...</a>
        </h5>
      </div>
      <div id="FilmGallery">
        <div id="outer">
          <ul class="slide-content">
            <li class="slide-item">
              <a href="javascript:;">
                <img src="../assets/images/dlr.jpg" alt="" />
              </a>
              <div class="gallery-detail">
                <div class="detail-hd">
                  <a href="#">
                    <h3>《德雷尔一家》</h3>
                  </a>
                </div>
                <div class="detail-bd">
                  <p>
                    《德雷尔一家第一季》讲述了一战结束后，一位丧偶的母亲带着四个孩子，离开阴冷的英国城镇伯恩茅斯，来到希腊小岛科孚岛居住的经历。
                  </p>
                </div>
              </div>
            </li>
            <li class="slide-item">
              <a href="javascript:;">
                <img src="../assets/images/hywj.jpg" alt="" />
              </a>
              <div class="gallery-detail">
                <div class="detail-hd">
                  <a href="#">
                    <h3>《何以为家》</h3>
                  </a>
                </div>
                <div class="detail-bd">
                  <p>
                    《何以为家》讲述了一个12岁的黎巴嫩男孩扎因悲惨的生活经历，他控告自己的父母，原因是父母生下了他，却没有能够好好的抚养他。
                  </p>
                </div>
              </div>
            </li>
            <li class="slide-item">
              <a href="javascript:;">
                <img src="../assets/images/lps.jpg" alt="" />
              </a>
              <div class="gallery-detail">
                <div class="detail-hd">
                  <a href="#">
                    <h3>《绿皮书》</h3>
                  </a>
                </div>
                <div class="detail-bd">
                  <p>
                    《绿皮书》讲述了保镖托尼被聘用为世界上优秀的古典钢琴家唐开车。钢琴家将从纽约开始举办巡回演奏，俩人之间一段跨越种族、阶级的友谊的故事。
                  </p>
                </div>
              </div>
            </li>
            <li class="slide-item">
              <a href="javascript:;">
                <img src="../assets/images/sklr.jpg" alt="" />
              </a>
              <div class="gallery-detail">
                <div class="detail-hd">
                  <a href="#">
                    <h3>《时空恋人》</h3>
                  </a>
                </div>
                <div class="detail-bd">
                  <p>
                    《时空恋人》讲述了一个拥有穿越时间能力的男人的故事。Tim21岁了，他的老爸告诉他，他们家族的男人都有时光旅行的超能力，可以回到过去。于是Tim将信就疑地试了一下，回到了夏天，在那里他试图改变和暗恋对象的关系，却发现怎么穿越时空都不能让不爱你的人爱上你。
                  </p>
                </div>
              </div>
            </li>
            <li class="slide-item">
              <a href="javascript:;">
                <img src="../assets/images/dlr.jpg" alt="" />
              </a>
              <div class="gallery-detail">
                <div class="detail-hd">
                  <a href="#">
                    <h3>《德雷尔一家》</h3>
                  </a>
                </div>
                <div class="detail-bd">
                  <p>
                    《德雷尔一家第一季》讲述了一战结束后，一位丧偶的母亲带着四个孩子，离开阴冷的英国城镇伯恩茅斯，来到希腊小岛科孚岛居住的经历。
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!-- 按钮控制电影滚动页 -->
        <div id="slide-control">
          <div id="pages">
            <span id="current-page">1</span>
            /
            <span id="total-page">4</span>
          </div>
          <div id="slide-control-buttons">
            <a href="javascript:;" id="pre-page">
              <span></span>
            </a>
            <a href="javascript:;" id="next-page">
              <span></span>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!-- 相册模块 -->
    <section class="w" id="AlbumArea">
      <div id="Album">
        <h5>
          相册<br /><br />ALBUM<br /><br />
          <a href="Album/album.html"> More...</a>
        </h5>
      </div>
      <div id="AlbumGallery">
        <div class="cards">
          <a href="javascript:;">
            <img
              src="../assets/images/view03.jpg"
              alt=""
              style="border-radius: 15px 15px 0 0"
            />
            <div class="illustration">北国风光</div>
          </a>
        </div>
        <div class="cards">
          <a href="javascript:;">
            <img
              src="../assets/images/view02.jpg"
              alt=""
              style="border-radius: 15px 15px 0 0"
            />
            <div class="illustration">游玩</div>
          </a>
        </div>
        <div class="cards">
          <a href="javascript:;">
            <img
              src="../assets/images/view01.jpg"
              alt=""
              style="border-radius: 15px 15px 0 0"
            />
            <div class="illustration">可爱的人儿</div>
          </a>
        </div>
        <div class="cards">
          <a href="javascript:;">
            <img
              src="../assets/images/view04.jpg"
              alt=""
              style="border-radius: 15px 15px 0 0"
            />
            <div class="illustration">好吃的</div>
          </a>
        </div>
      </div>
    </section>
    <!-- 关于我模块 -->
    <section id="AboutMe">
      <div class="w" id="AboutMe-box">
        <div id="AboutMe-box-left">
          <h5>
            关于我<br /><br />ABOUT ME<br /><br />
            <a href="#"> More...</a>
          </h5>
        </div>
        <div id="AboutMe-box-right">
          <img
            src="../assets/images/ZSZ2.jpg"
            alt=""
            style="border-radius: 15px 0 0 15px; height: 380px"
          />
          <div id="SelfIntruduce-wrap">
            <h5>张翠山</h5>
            <div id="SelfIntruduce-left">
              <div class="SelfIntruduce-content">性 别：男</div>
              <div class="SelfIntruduce-content">年 龄：保 密</div>
              <div class="SelfIntruduce-content">现居地：北京石景山</div>
              <div class="SelfIntruduce-content">星 座: 双子座</div>
              <div class="SelfIntruduce-content">婚姻状况：已 婚</div>
            </div>
            <div id="SelfIntruduce-right">
              <div class="SelfIntruduce-content">职 业：程 序 员</div>
              <div class="SelfIntruduce-content">毕业院校：二本学院</div>
              <div class="SelfIntruduce-content">
                就读专业：计算机科学与技术
              </div>
              <div class="SelfIntruduce-content">
                兴趣爱好: 足球、看书、写博客
              </div>
              <div class="SelfIntruduce-content">江湖ID：张翠山</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import "@/assets/css/home.css";

export default {
  name: "Home",
  components: {},
  props: {},
  data() {
    return {
      msg: "主页部分",
    };
  },
  computed: {},
  watch: {},
  created() {
    // 使用全局挂载的 $axios 发起 GET 请求
    this.$axios
      .get("/")
      .then((res) => {
        this.msg = res.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
</style>
